<html lang="zh-CN">
<head>
    <title>Demo</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta charSet="utf-8"/>
    <!-- onlyoffice服务器地址 -->
    <script src="http://101.34.12.63:8014/web-apps/apps/api/documents/api.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        body {
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>
<label for="URL">URL</label>
<input type="text" style="width:60%" id="url"
       value="https://zgydev.oss-cn-shanghai.aliyuncs.com/demo.docx"/>
<button type="button" onClick="preview()">点击编辑文档</button>
<!-- 占位元素 -->
<div id="placeholder"></div>
<script>
    /**
     * 详细配置文档：https://api.onlyoffice.com/editors/config/
     * @param url 要预览的文档地址 https://shencase.oss-cn-shanghai.aliyuncs.com/TPI65%E4%BB%8B%E7%BB%8D.ppt
     * @param filename 要预览的文档文件名
     */
    function preview() {
        let url = $("#url").val();
        let suffix = url.substring(url.lastIndexOf(".") + 1)
        let filename = "demo." + suffix

        $.ajax({
             async:false,
             url: "/hello/loadInit?templateUrl="+url,
             success: function (data) {
                 const config = {
                    "document": {
                        "permissions": {
                            comment: false,
                            fillForms: false,
                            "edit": true,
                        },
                        "fileType": suffix,
                        "title": filename,
                        "url": data,
                        // "key": this.md5,
                        "lang": "zh-CN"
                    },
                    "width": '100%',
                    "editorConfig": {
                        mode: 'edit',
                        "lang": "zh-CN"
                    }
                };
                document.title = filename;
                const docEditor = new DocsAPI.DocEditor("placeholder", config);

             },
             error:function(data){
                console.info("error: " + data.responseText);
             }
         })

    }
</script>
</body>
</html>